import React, { Component } from 'react';
import { Layout, Menu, Button } from 'antd';
import '../assets/css/main.css';
import { AppstoreAddOutlined, SettingOutlined, AreaChartOutlined } from '@ant-design/icons';
import { Route, Switch } from 'react-router-dom';
// 布局组件
const { SubMenu } = Menu;
const { Header, Sider } = Layout;

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            defaultSelectedKeys: '',
            defaultOpenKeys: [],
            collapsed: false     // 侧边栏折叠
        }
    }

    openChange(defaultOpenKeys) {
        if (defaultOpenKeys.length > 1) {
            defaultOpenKeys.shift();
        }
        this.setState({
            defaultOpenKeys
        });
    }

    // 安全退出
    logout(){
        // 清除登录凭证
        sessionStorage.removeItem('token');
        this.props.history.push('/login');
    }

    render() {
        return (
            <Layout>
                <Header className="header">
                    <div className="logo" />
                    <Button onClick={() =>this.logout()} shape="round" className="logout" type="primary">安全退出</Button>
                </Header>
                <Layout>
                    <Sider onCollapse={() => this.setState({ collapsed: !this.state.collapsed })} collapsible collapsed={this.state.collapsed} width={200} className="site-layout-background">
                        <Menu
                            theme="dark"
                            mode="inline"
                            defaultSelectedKeys={[this.state.defaultSelectedKeys]}
                            defaultOpenKeys={this.state.defaultOpenKeys}
                            onOpenChange={this.openChange.bind(this)}
                            style={{ height: '100%', borderRight: 0 }}
                        >
                            <SubMenu key="product" icon={<AppstoreAddOutlined />} title="商品管理">
                                <Menu.Item key="/admin/product-list" onClick={() => this.go('/admin/product-list')}>商品列表</Menu.Item>
                            </SubMenu>

                            <SubMenu key="chart" icon={<AreaChartOutlined />} title="数据统计">
                                <Menu.Item key="/admin/chart-bar" onClick={() => this.go('/admin/chart-bar')}>柱状图</Menu.Item>
                                <Menu.Item key="/admin/chart-line" onClick={() => this.go('/admin/chart-line')}>折线图</Menu.Item>
                                <Menu.Item key="/admin/chart-pie" onClick={() => this.go('/admin/chart-pie')}>饼状图</Menu.Item>
                            </SubMenu>

                            <SubMenu key="user" icon={<SettingOutlined />} title="设置">
                                <Menu.Item onClick={()=>this.go('/admin/user-pwd')} key="/admin/user-pwd">密码重置</Menu.Item>
                            </SubMenu>
                        </Menu>
                    </Sider>
                    <Layout style={{ padding: '0 24px 24px' }}>


                        {/* 二级路由出口 */}
                        {this.props.routes.map((value, index) => (
                            <Route key={index} exact={false} path={value.path} render={(routeProps) => <value.component {...routeProps} />} />
                        ))}

                    </Layout>
                </Layout>
            </Layout>
        )
    }
    go(url) {
        this.setState({
            currentMenuKey: '/admin/chart-pie'
        });
        this.props.history.push(url);
    }
    componentWillMount() {
        const defaultSelectedKeys = this.props.location.pathname;
        const defaultOpenKeys = [defaultSelectedKeys.split('/')[2].split('-')[0]];
        this.setState({
            defaultSelectedKeys,
            defaultOpenKeys
        })
    }
}
